<template>
  <div class="hello">
    <el-tabs type="border-card">
      <el-tab-pane label="用户管理">
        <!-- 第一个 -->
        <div id="jings">
          <el-popover placement="top" width="160" v-model="visible_s">
            <p>确定全选吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible_s = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="all_s()"
                >确定</el-button
              >
            </div>
            <el-button slot="reference">全选</el-button>
          </el-popover>
          城市
          <el-tag
            style="margin-left: 6px"
            :key="tag.name"
            v-for="tag in number_s"
            :type="tag.type"
            closable
            :disable-transitions="false"
            @close="close_s(tag)"
            :color="tag.color"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <!-- 第二个 -->
        <div id="jingx">
          <el-popover placement="top" width="160" v-model="visible_x">
            <p>确定全选吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible_x = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="all_x()"
                >确定</el-button
              >
            </div>
            <el-button slot="reference">全选</el-button>
          </el-popover>
          省份
          <el-tag
            style="margin-left: 6px"
            :key="tag.name"
            v-for="tag in number_x"
            :type="tag.type"
            closable
            :disable-transitions="false"
            @close="close_x(tag)"
            :color="tag.color"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <el-col :span="7">
          <!-- 这是左侧内容 -->
          <el-timeline v-for="(item, index) in logs" :key="index">
            <el-timeline-item>
              <el-card>
                {{ item.day }}
                <p v-if="item.day_s1">
                  <el-tag>{{ item.day_s1 }}</el-tag>
                  >
                  <el-tag
                    style="margin-left: 6px"
                    :key="tag.name"
                    v-for="tag in item.day_t1"
                  >
                    {{ tag }}
                  </el-tag>
                </p>
                <p v-if="item.day_s2">
                  <el-tag>{{ item.day_s2 }}</el-tag>
                  >
                  <el-tag
                    style="margin-left: 6px"
                    :key="tag.name"
                    v-for="tag in item.day_t2"
                  >
                    {{ tag }}
                  </el-tag>
                </p>
                <div v-if="item.day_s[0]">
                  <el-tag>{{ item.day_s[0].select }}</el-tag> >
                  <el-tag
                    style="margin-left: 6px"
                    :key="tag.name"
                    v-for="tag in item.day_s[0].type"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                <p v-if="item.day_s[1]">
                  <el-tag>{{ item.day_s[1].select }}</el-tag> ><el-tag
                    style="margin-left: 6px"
                    :key="tag.name"
                    v-for="tag in item.day_s[1].type"
                  >
                    {{ tag }}
                  </el-tag>
                </p>
                <p v-if="item.day_s[2]">
                  <el-tag>{{ item.day_s[2].select }}</el-tag> >
                  <el-tag
                    style="margin-left: 6px"
                    :key="tag.name"
                    v-for="tag in item.day_s[2].type"
                  >
                    {{ tag }}
                  </el-tag>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-popover
            placement="bottom"
            title="标题"
            width="200"
            trigger="click"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          >
            <el-button slot="reference">click 激活</el-button>
          </el-popover>
        </el-col>
        <vKill :logs="logs" v-on:child-says="listenToMyBoy1" v-on:child-sayz="listenToMyBoy2" v-on:child-sayx="listenToMyBoy3"></vKill>
        <div>
          <el-card class="box-card">
            <span>log</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="kpqk()">清空</el-button>
          <div style="margin-top:12px" v-for="(o,index) in logmax" :key="index">
            {{o.name}}疑似 is
            {{o.number}}number
            <el-select v-model="o.value" multiple placeholder="请选择" style="width:300px">
              <el-option
                v-for="item in 12"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
        </el-card>
         <el-card class="box-card" style="margin-top:18px">
           <textarea
           placeholder="记事本，随便写点什么吧...."
            name="textRecord"
            cols="40"
            rows="15"
            style="resize: none"
        ></textarea>
        </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="表单">
        <vForm ref="procedureEdit" v-on:child-say="listenToMyBoy"></vForm>
      </el-tab-pane>
      <el-tab-pane label="API">
         <vApi></vApi>
      </el-tab-pane>
     <!--  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import vKill from "../components/kill";
import vForm from "../components/Form";
import vApi from "../components/Api";
export default {
  name: "HelloWorld",
  components: {
    vKill,
    vForm,
    vApi,
  },
  data() {
    return {
      number: [
        { name: "1", type: "" },
        { name: "2", type: "success" },
        { name: "3", type: "info" },
        { name: "4", type: "warning" },
        { name: "5", type: "danger" },
        { name: "6", type: "" },
        { name: "7", type: "success" },
        { name: "8", type: "info" },
        { name: "9", type: "warning" },
        { name: "10", type: "danger" },
        { name: "11", type: "warning" },
        { name: "12", type: "danger" },
      ],
      number_s: [],
      number_x: [],
      visible_s: false,
      visible_x: false,
      _form: {},
      logs: [],
      logmax:[],
    };
  },
  watch: {
  },
  mounted() {
    this.number_s = [...this.number];
  },
  methods: {
    listenToMyBoy3(ele){
      let a = 0;
       this.logmax.forEach(e =>{
         if(e.name === ele[0].name){
           e.number = ele[0].number;
           a = 1;
         }
       })
       if(a == 0)
         this.logmax.push({"name":ele[0].name,"number":ele[0].number,"value":"value2"})
    },
    listenToMyBoy2(ele){
      let a = 0;
       this.logmax.forEach(e =>{
         if(e.name === ele[0].name){
           e.number = ele[0].number;
           a = 1;
         }
       })
       if(a == 0)
         this.logmax.push({"name":ele[0].name,"number":ele[0].number,"value":"value1"})
    },
    listenToMyBoy1(ele){
      this.logmax.push(''+ele[0].day+''+ele[0].name)
    },
    listenToMyBoy(ele) {
      this._form = ele;
      console.log(this._form);
      let split1 = 1;
      this.logs.forEach((v) => {
        if (v.day == ele.day) {
          v.day_s1 = ele.select1;
          (v.day_s2 = ele.select2),
            (v.day_t1 = ele.type1),
            (v.day_t2 = ele.type2),
            (v.day_s = ele.dynamicItem),
            (split1 = 0);
        }
      });
      if (split1 == 1) {
        this.logs.push({
          day: ele.day,
          day_s1: ele.select1,
          day_s2: ele.select2,
          day_t1: ele.type1,
          day_t2: ele.type2,
          day_s: ele.dynamicItem,
        });
        split1 = 0;
      }
    },
    close_s(tag) {
      this.number_s.splice(this.number_s.indexOf(tag), 1);
      this.number_x.push({ name: tag.name, type: tag.type });
    },
    close_x(tag) {
      this.number_x.splice(this.number_x.indexOf(tag), 1);
      this.number_s.push({ name: tag.name, type: tag.type });
    },
    all_s() {
      this.number_x.splice(0, this.number_x.length);
      this.number_s.splice(0, this.number_s.length);
      this.number_s = [...this.number];
      this.visible_s = false;
    },
    all_x() {
      this.number_s.splice(0, this.number_s.length);
      this.number_x.splice(0, this.number_x.length);
      this.number_x = [...this.number];
      this.visible_x = false;
    },
    react() {
      let textRecords = document.getElementsByName("textRecord");
      textRecords.forEach((res) => {
        res.value = "";
      });
    },
    kpqk(){
      this.logmax = [];
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#jings {
  margin: 20px;
  border: 1px solid red;
  width: 92%;
  padding: 8px;
  border-radius: 20px;
}
#jingx {
  margin: 20px;
  border: 1px solid blue;
  width: 92%;
  padding: 8px;
  border-radius: 20px;
}
</style>
